<template>

  <view class="cart">
    <!-- 头部区域 -->
    <view class="navHead">
      <view class="navHeadItem">
        <view class="navHeadIcon">
          <image class="iconImage" src="http://localhost:3000/static/返回.png" mode=""></image>
        </view>
        <view class="navTitle">购物车</view>
        <view class="navAdmin">管理</view>
      </view>
    </view>

    <view class="container">
      <!-- 空购物车区域 -->
      <view class="nullCart" v-if="isShow">
        <view class="nullCartText">购物车空空如也~</view>
        <button size="mini" @click="goDetail">去选购商品</button>
      </view>

      <!-- 商品区域 -->
      <view class="goodsWrap" v-else  :style="{height: wh + 'px'}">
        <view class="goodsList">
          <view class="goodsItem" v-for="(item,i) in  cart" :key="i">
            <view class="goodsTop">
              <checkbox-group name="" class="select">
                <label>
                  <checkbox :checked="item.goods_state" @click="changeState(item)" value=""
                    style="transform:scale(0.7)" />
                </label>
              </checkbox-group>
              <view class="storeIcon">
                <image src="http://localhost:3000/static/a41.png" mode=""></image>
              </view>
              <view class="storeName">兼美</view>
              <view class="rightIcon">
                <image src="http://localhost:3000/static/a38.png" mode=""></image>
              </view>
            </view>

            <!-- 商品图片和介绍区域 -->
            <view class="goodsInfoWrap">
              <checkbox-group class="check" name="">
                <label>
                  <checkbox :checked="item.goods_state" @click="changeState(item)" value=""
                    style="transform:scale(0.7)" />
                </label>
              </checkbox-group>
              <view class="goodsImage">
                <image :src="item.goods_small_logo" mode=""></image>
              </view>
              <view class="goodsInfo">
                <view class="info hidden">{{item.goods_name}}</view>
                <view class="size hidden">1800mm*2000</view>

                <view class="price-count">
                  <view class="price">￥{{item.goods_price}}</view>
                  <view class="count">
                    <view class="lose num" @click="redCountLeft(item)">-</view>
                    <view class="num">{{item.goods_count}}</view>
                    <view class="add num" @click="addCountRight(item)">+</view>
                  </view>
                </view>
              </view>

            </view>


          </view>
        </view>

        <!-- 结算区域 -->
        <view class="payWrap">
          <checkbox-group name="">
            <label>
              <checkbox :checked="isAllSelect" @click="changeAll(!isAllSelect)" value="" style="transform:scale(0.7)" />
              全选
            </label>
          </checkbox-group>
          <view class="allNum">
            <text>合计:￥{{allCost}}</text>
            <view class="pay">结算</view>
          </view>
        </view>

      </view>
    </view>
  </view>
</template>

<script>
  import {
    mapGetters,
    mapState,
    mapMutations
  } from 'vuex'
  import badgeMix from '@/mixins/tabbar-badge.js'
  export default {
    mixins: [badgeMix],
    data() {
      return {
        isShow: false,
        isAllSelect: false,
        allCost: 0,
        wh:''
      };
    },
    onLoad() {
      const sysinfo = uni.getSystemInfoSync()
      this.wh = sysinfo.windowHeight - 120
    },
    methods: {
      ...mapMutations('m_cart', ['addCount', 'redCount', 'changeS', 'changeA']),
      addCountRight(msg) {
        this.addCount(msg)
        this.numbox()
      },
      redCountLeft(msg) {
        this.redCount(msg)
        this.numbox()
      },
      changeState(msg) {
        this.changeS(msg)
        const newarr = this.cart
        //判断是否全选
        const allResult = newarr.every(function(elem) {
          return (elem.goods_state === true)
        })
        // console.log(allResult);
        if (allResult) {
          this.isAllSelect = true
        } else {
          this.isAllSelect = false
        }
        // console.log(this.isAllSelect)
        this.numbox()
      },
      //计算金额封装
      numbox() {
        //计算总金额
        const newSelect = this.cart.filter(function(elem) {
          return (elem.goods_state === true)
        })
        let costSelect = newSelect.reduce(function(box, elem) {
          const onePrice = Number(elem.goods_count) * Number(elem.goods_price)
          return box += onePrice
        }, 0)
        this.allCost = costSelect
      },
      changeAll(isAllSelect) {
        this.isAllSelect = !this.isAllSelect
        this.changeA(isAllSelect)
        this.numbox()
      },
      goDetail() {
        uni.switchTab({
          url: '/pages/menu/menu'
        })
      }
    },
    computed: {
      ...mapGetters('m_cart', ['total']),
      ...mapState('m_cart', ['cart']),
    },
    onShow() {
      this.setBadge()
      this.numbox()
      if (this.cart.length < 1) {
        this.isShow = true
      }else {
        this.isShow = false
      }
    }
  }
</script>

<style lang="scss">
  .cart {

    // 头部区域
    .navHead {
      background: #fff;
      padding: 0 24rpx;

      .navHeadItem {
        display: flex;
        justify-content: space-between;
        padding: 70rpx 0 30rpx;

        .navHeadIcon {
          padding-top: 4rpx;
          box-sizing: border-box;

          .iconImage {
            width: 16rpx;
            height: 30rpx;
          }
        }

        .navTitle {
          font-size: 34rpx;
          color: #232e3d;
        }

        .navAdmin {
          font-size: 30rpx;
          color: #8a94a1;
        }
      }
    }

    .container {

      // 空购物车区域
      .nullCart {
        margin-top: 260rpx;
        text-align: center;

        .nullCartText {}

        button {
          width: 450rpx;
          margin-top: 60rpx;
          font-size: 35rpx;
          background-color: #eee;
        }
      }

      // 商品区域
      .goodsWrap {
        width: 100%;
        padding: 20rpx 24rpx;
        box-sizing: border-box;
        background-color: #f1f1f1;

        .goodsList {
          border-radius: 15rpx;
          padding-bottom: 120rpx;

          .goodsItem {
            background-color: #fff;
            margin-bottom: 24rpx;
            border-radius: 20rpx;
            padding-left: 24rpx;
            overflow: hidden;
            .goodsTop {
              padding: 40rpx 0;
              display: flex;
              align-items: center;
              border-radius: 15rpx;

              .select {
                height: 40rpx;
              }

              .storeIcon {
                height: 40rpx;

                image {
                  width: 40rpx;
                  height: 35rpx;
                  margin: 0 26rpx;
                }
              }

              .storeName {
                height: 40rpx;
                font-size: 26rpx;
                color: #8a94a1;
                margin-right: 18rpx;
              }

              .rightIcon {
                height: 40rpx;

                image {
                  width: 16rpx;
                  height: 30rpx;
                }
              }
            }

            .goodsInfoWrap {
              display: flex;
              background-color: #fff;

              .check {
                line-height: 271rpx;
              }

              .goodsImage {
                image {
                  width: 271rpx;
                  height: 271rpx;
                  margin: 0 18rpx;
                  border-radius: 16rpx;
                }
              }

              .goodsInfo {
                width: 300rpx;

                .info {
                  width: 270rpx;
                  font-size: 26rpx;
                  color: #252e3d;
                  line-height: 30rpx;
                  margin-top: 35rpx;
                }

                .hidden {
                  overflow: hidden;
                  text-overflow: ellipsis;
                  display: -webkit-box;
                  -webkit-box-orient: vertical;
                  -webkit-line-clamp: 2;
                }

                .size {
                  font-size: 20rpx;
                  line-height: 24rpx;
                  margin-top: 18rpx;
                }

                .price-count {
                  margin: 60rpx 0 24rpx;
                  font-size: 24rpx;
                  display: flex;
                  justify-content: space-between;

                  .price {
                    display: inline-block;
                  }

                  .count {
                    width: 139rpx;
                    display: flex;

                    .num {
                      width: 46rpx;
                      height: 18rpx;
                      border: 1rpx solid #dadbdd;
                      line-height: 18rpx;
                      text-align: center;
                      margin-top: 4rpx;
                    }
                  }
                }
              }
            }
          }
        }
      }
    }

    // 结算区域
    .payWrap {
      width: 100%;
      padding: 0 24rpx;
      box-sizing: border-box;
      line-height: 140rpx;
      font-size: 30rpx;
      background-color: #fff;
      display: flex;
      justify-content: space-between;
      position: fixed;
      left: 0;
      bottom: 0;

      .allNum {
        .pay {
          display: inline-block;
          width: 180rpx;
          background-color: #232e3d;
          line-height: 80rpx;
          text-align: center;
          border-radius: 50rpx;
          color: #fff;
          margin-left: 50rpx;
        }
      }
    }
  }
</style>
